<template>
	<view class="car">
		<view class="aa">
			<view class="top">
				<text class="phone">上传行驶证</text>
				<text class="phone" style="float: right;">上传车身正面照</text>
				<view class="load">
					<u-upload :action="action"></u-upload>
					<u-upload :action="action1"></u-upload>
				</view>
			</view>
		</view>
		<view class="between">
			<view class="line1">
				<text>当前城市</text>
				<input type="text" value="" :placeholder="city"  :disabled="true" @click="choose"/>
			</view>
			<view class="line2">
				<text>车牌号</text>
				<input type="text" value="" placeholder="输入车牌号码" :disabled="true" @click="window(1)" v-model="chepaihao"/>
			</view>
			<view class="window" v-if="active==1">
				<view class="shuru">
					<view class="pleace">
						请输入车牌号
					</view>
					<view class="" @click="close">
						<image src="../../static/img/plate_close.png" mode=""></image>
					</view>
				</view>
				<view class="number">
					<view class="view">
						<view class="view1" @click="show = true">{{haoma}}</view>
						<input type="text" value="" class="view2" v-model="val[0]" maxlength="1" ref="input1"/>
					</view>
					<view class="dian"></view>
					<input type="text" value="" class="num" v-model="val[1]" maxlength="1" ref="input2"/>
					<input type="text" value="" class="num" v-model="val[2]" maxlength="1" ref="input3"/>
					<input type="text" value="" class="num" v-model="val[3]" maxlength="1" ref="input4"/>
					<input type="text" value="" class="num" v-model="val[4]" maxlength="1" ref="input5"/>
					<input type="text" value="" class="num" v-model="val[5]" maxlength="1" ref="input6"/>
					<input type="text" value="" class="num1" v-model="val[6]" maxlength="1" ref="input7"/>
				</view>
				<view class="yes" @click="ok">
					确认
				</view>
			</view>
			<u-keyboard ref="uKeyboard" mode="car" v-model="show" :mask="false" @change="confirm"></u-keyboard>
		</view>
		<view class="bottom">
			<view class="withdrawal">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "car",
		data() {
			return {
				city:uni.getStorageSync('city'),
				chepaihao:'',
				action: '#',
				action1: '#',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				date:'',
				active:'',
				haoma:"",
				val:[],
			}
		},
		 // watch: {
		 //          val: function (val) {
			// 		  console.log(this.refs)
		 //            if (val.length < 7) {
		 //              this.$refs['input'+(val.length+1)].focus();
		 //            } else {
		 //              this.$refs.input7.blur();
		 //            }
		 //          },
		 //        },
		methods: {
			ok() {
				this.chepaihao=this.haoma+this.val.join("").toLocaleUpperCase();
				if((this.haoma+this.val.join("").toLocaleUpperCase()).length==8){
					this.active=0;
				}
			    console.log(this.val.join("").toLocaleUpperCase());
			},
			close(){
				this.active=0;
			},
			window(val){
				this.active=val;
			},
			confirm(val) {
				console.log(val)
				this.haoma=val;
			},
			choose(){
				uni.navigateTo({
					url: "/pages/index/choose"
				})
			},
		},
		onShow() {
			this.city=uni.getStorageSync('city')
		}
	}
</script>

<style scoped>
	.yes{
		width: 90%;
		padding: 20rpx;
		border: 2rpx solid rgb(222,222,222);
		background-color: rgb(247,247,247);
		color: rgb(172,172,172);
		border-radius: 6rpx;
		margin: 0 auto;
		text-align: center;
	}
	.num1{
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
		text-align: center;
		border:2rpx dashed rgb(151,151,151);
	}
	.num{
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
		border:2rpx solid rgb(151,151,151);
		text-align: center;
	}
	.dian{
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: rgb(151,151,151);
	}
	.view2{
		width: 50%;
		text-align: center;
	}
	.view1{
		width: 55%;
		border-right: 2rpx solid rgb(151,151,151);
		text-align: center;
	}
	.view{
		border: 1px solid rgb(151,151,151);
		border-radius: 6rpx;
		width: 120rpx;
		height: 66rpx;
		display: flex;
		flex-direction: row;
		    padding: 12rpx;
	}
	.number{
		display: flex;
		flex-direction: row;
		    width: 90%;
		    align-items: center;
justify-content: space-between;
margin: 4% auto;
	}
	.pleace{
		font-size: 34rpx;
		font-weight: 600;
	}
	.shuru image{
		width: 50rpx;
		height: 50rpx;
	}
	.shuru{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.window{
		    background-color: #FFFFFF;
		    width: 87%;
		    margin: 0 auto;
		    height: 300rpx;
		    padding: 24rpx;
		    position: fixed;
		    top: 50%;
			left: 50%;
		    transform: translate(-50%, -50%);
	}
	.car {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}

	.aa {
		display: flex;
	}

	.top {
		width: 95%;
		height: 400rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 3%;
		padding: 24rpx;
	}

	.phone {
		font-weight: 600;
		font-size: 32rpx;
	}

	.load {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 60rpx;
	}

	.between {
		width: 95%;
		height: 210rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 3%;
		padding: 24rpx;
	}

	.line1 {
		display: flex;
		flex-direction: row;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #A5A5A5;
	}

	.line1 text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.line1 input {
		text-align: right;
		margin-left: 22%;
	}

	.line2 {
		display: flex;
		flex-direction: row;
		padding-bottom: 30rpx;
		margin-top: 5%;
		/* border-bottom: 1px solid #A5A5A5; */
	}

	.line2 text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.line2 input {
		text-align: right;
		margin-left: 27%;
	}

	.line3 {
		display: flex;
		flex-direction: row;
		padding-bottom: 30rpx;
		margin-top: 5%;
		/* border-bottom: 1px solid #A5A5A5; */
	}

	.line3 text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.line3 input {
		text-align: right;
		margin-left: 13%;
	}
	.bottom{
		margin: 0 auto;
		width: 94%;
		margin-top: 40%;
	}
	.withdrawal{
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53,199,233) , rgb(30,141,255));
	}
</style>
